<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>
    <three></three>
</div>
<script>
    Vue.component('one',{
        template:`
            <div>
                <h3>第一个儿子收到：{{string}}</h3>
            </div>
       `,
        props:['string'],
    })
    Vue.component('two',{
        template:`
            <div :style="ChildStyle">
                <one :string="one"></one>
                <h2>twoChild：求和</h2>
                <h4>总计：{{counts}}</h4>
                <button @click="addBtn()">点赞</button>
            </div>
       `.trim(),
        data(){
            return {
                ChildStyle:{
                    border:'1px solid red' ,
                    fontSize:'18px',
                    color:'black',
                    width:'250px',
                    float:'left',
                    marginLeft:'20px'
                },
                counts:0,
                one:'收到twoChild传给我的新信息'
            }
        },
        methods:{
            addBtn(){
                this.counts++
                this.$emit('addthree')//子组件可以使用 $emit 触发父组件的自定义事件。
            }
        }
    })
    Vue.component('three',{
        template:`
            <div>
                <h2>第三个儿子收到</h2>
                <h3>总计：{{counts}}</h3>
                <two @addthree="addThree()"></two>
                <two @addthree="addThree()"></two>
                <two @addthree="addThree()"></two>
                <two @addthree="addThree()"></two>
            </div>
       `.trim(),
        data() {
            return {
                counts:0,
            }
        },
        methods: {
            addThree(){
                this.counts += 1;
            }
        }
    })
    let app = new Vue({
        el:'#app',
        data:{
            message:'我们的组件',
        }
    })
</script>
</body>
</html>